<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import { getDanCiApi, addShengCiBenWorldApi, tijiaodanciqianghuaApi } from '/api/request.js';
import { includeListGetItem } from '/utils/index.js';
// 1美 2英
const type = ref(2);
const props = defineProps({});
onMounted(() => {});
let platform = uni.getStorageSync('platform');
const goback = async () => {
    uni.navigateBack();
};
const query = ref({
    word_ids: '',
    hui: '',
    index: 0
});
const list = ref([]);
onLoad(async (e) => {
    if (uni.getStorageSync('bofangmoshi')) {
        type.value = uni.getStorageSync('bofangmoshi');
    }
    query.value.word_ids = e.id;
    query.value.record2_id = e.ids;
    query.value.indexs = e.indexs;
});
onShow(async () => {
    let res = await getDanCiApi(query.value);
    list.value = res.data;
});

const playIndex = ref(-1);
const shunxu = ref(false);
const changePlayAudio = () => {
    if (playIndex.value == 4) shunxu.value = true;
    if (playIndex.value == 0) shunxu.value = false;
    if (shunxu.value) {
        playIndex.value -= 1;
    } else {
        playIndex.value += 1;
    }
    let item = list.value[query.value.index * 5 + playIndex.value];
    playAudio(item.id, item.detail.word_audio_url_en);
};
const onclick = async (e) => {
    let res = await addShengCiBenWorldApi({
        word: list.value[e.index].name
    });
    uni.showToast({
        title: res.msg,
        icon: 'none'
    });
};
const btnGroup = ref([
    {
        name: '生词本',
        action: '1',
        style: {
            fontSize: '32rpx',
            width: '148rpx',
            height: '116rpx',
            color: '#fff',
            bgColor: '#9662F5'
        }
    }
]);
const select = ref('');
const changeSelect = (e) => {
    select.value = e;
};

const center = ref(null);
const change = (index) => {
    if (index == 2) {
        center.value.open('center');
    }
};
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
//最后点击的是谁
const nowIndex = ref(null);
//被点击过都在里面
const getIdList = ref([]);
//点击过是第几次点击
const statusList = ref({});
const showIconList = ref([]);
const playAudio = (id, url, status = false) => {
    let http =
        type.value == 1
            ? 'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/'
            : 'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
    console.log(`https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/${url}`);
    uni.$emit('playAudio', http + `${url}`, true);
    nowIndex.value = id;
    const indexs = getIdList.value.findIndex((item) => item == id);
    if (indexs == -1) {
        getIdList.value.push(id);
    }
    //剪纸盒子的骡子
    const index = statusList.value.id == id;
    if (!index) {
        statusList.value.id = id;
        statusList.value.status = 1;
    } else {
        if (statusList.value.status == 1) {
            const indexs = showIconList.value.findIndex((item) => item == id);
            if (indexs == -1) {
                showIconList.value.push(id);
            }
        }
        statusList.value.status =
            statusList.value.status == 1
                ? 2
                : statusList.value.status == 2
                ? 3
                : statusList.value.status == 3
                ? 1
                : 1;
    }
};

const returnItemClassStatus = (id) => {
    //第一种情况
    if (nowIndex.value) {
        //第二种情况存在
        let index = includeListGetItem(getIdList.value, id);
        if (index == -1) {
            return 'none';
        } else {
            // 第三种 展示音标
            const zhege = statusList.value.id == id;
            if (zhege) {
                let num = statusList.value.status;
                //第一次点击
                if (num == 1) {
                    if (showIconList.value.findIndex((item) => item == id) != -1) {
                        return 'yaotubiao';
                    } else {
                        return 'heide';
                    }
                    //第二次点击
                } else if (num == 2) {
                    if (showIconList.value.findIndex((item) => item == id) != -1) {
                        return 'yaotubiaos';
                    } else {
                        return 'heides';
                    }
                } else if (num == 3) {
                    if (showIconList.value.findIndex((item) => item == id) != -1) {
                        return 'yaotubiaoss';
                    } else {
                        return 'heidess';
                    }
                }
            } else if (showIconList.value.findIndex((item) => item == id) != -1) {
                return 'zhanshi';
            }
        }
    } else {
        //黑 谁都没有过 最开始的样子
        return 'none';
    }
};
const showTop = ref(false);
const tijiao = async () => {
    if (showIconList.value.length != list.value.length) {
        uni.showToast({
            title: '请完成全部的单词强化',
            icon: 'none'
        });
        return;
    }
    let res = await tijiaodanciqianghuaApi({
        record2_id: query.value.record2_id
    });
    uni.showToast({
        title: res.msg,
        icon: 'none'
    });
    if (res.code == 1) {
        setTimeout(() => {
            uni.navigateBack();
        }, 600);
    }
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> 汇总强化 </view>
            <image
                class="left"
                style="opacity: 0"
                src="/static/img/goback-black.png"
                mode="widthFix"
            />
        </view>
        <scroll-view
            v-if="list && list.length"
            class="body"
            :scroll-y="true"
            :style="{
                height:
                    platform.gaodu -
                    platform.dingbu -
                    96 -
                    28 -
                    (query.indexs == 2 ? 100 : 0) +
                    'rpx'
            }"
        >
            <view
                class="item uni-row"
                :id="item.id"
                v-for="(item, index) in list"
                :key="index"
                :class="returnItemClassStatus(item.id)"
                @click="playAudio(item.id, item.detail.audio_file_name.word)"
            >
                <next-swipe-action
                    :btnGroup="btnGroup"
                    :index="index"
                    @btnClick="onclick"
                    :select="select"
                    @changeSelect="changeSelect"
                >
                    <view class="uni-row nei">
                        <view class="lefts">
                            <view class="uni-row fa" v-if="item.detail">
                                <view
                                    class="left yingwen"
                                    v-for="(i, iIndex) in item.detail.s_split"
                                    :key="index"
                                    :class="iIndex % 2 == 0 ? 'actives' : 'defaults'"
                                >
                                    {{ Object.keys(i)[0] }}
                                </view>
                            </view>
                            <view class="center yinbiao uni-row">
                                /{{ type == 1 ? item.detail.us : item.detail.uk }}/
                                <!-- :
								<view class="yinbiao " v-for="(item,index) in item.detail.tran_memo" :key="index">
									{{ item }}
								</view> -->
                            </view>
                        </view>
                        <view class="fanti">
                            {{ item.detail.youdao_api.translation[0] }}
                        </view>
                        <image
                            v-if="query.indexs == 2"
                            src="/static/img/lvsedui.png"
                            class="icon"
                        ></image>
                    </view>
                </next-swipe-action>
            </view>
        </scroll-view>
        <view class="nothing" v-if="list && list.length < 1">
            <image src="/static/img/nothing.png" class="img"></image>
            <view class="label"> 哎呀，这里什么内容都没有 </view>
        </view>
        <view class="btn uni-row" @click="tijiao" v-if="query.indexs == 2"> 完成 </view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            margin-left: 32rpx;
        }

        .menu {
            position: relative;

            .item {
                justify-content: center;
                width: 144rpx;
                height: 52rpx;
                font-size: 24rpx;

                &.dayin {
                    color: #fff;
                    background: #fa862c;
                    border-radius: 8rpx;
                }

                &.yings {
                    position: absolute;
                    top: 52rpx;
                    z-index: 100;
                    background: #ffe5d2;
                    border-radius: 8rpx 8rpx 0 0;
                    color: #fa862c;
                }

                &.yingss {
                    border-radius: 0 0 8rpx 8rpx;
                    position: absolute;
                    top: 104rpx;
                    z-index: 100;
                    color: #fa862c;
                    background: #fff3ea;
                }
            }
        }

        .submit {
            font-size: 24rpx;
            color: #fff;
            background-color: #9561f3;
            justify-content: center;
            width: 144rpx;
            height: 52rpx;
            border-radius: 8rpx;
            margin-left: 32rpx;
        }
    }

    .body {
        padding: 0 28rpx;

        .item {
            margin-bottom: 16rpx;
            border-radius: 8rpx;
            overflow: hidden;
            background-color: #fff;

            .nei {
                height: 116rpx;
                width: 100%;
                padding: 0 28rpx;
                justify-content: space-between;
                border-radius: 8rpx;
                font-size: 42rpx;

                .lefts {
                    .center {
                        display: none;
                        margin-top: 10rpx;
                        font-size: 24rpx;
                        color: #999999;
                    }
                }

                .fanti {
                    font-size: 28rpx;
                    color: #333333;
                    opacity: 0;
                    transition: 0.2s all;
                }

                .icon {
                    display: none;
                    width: 48rpx;
                    height: 48rpx;
                }
            }

            &.none {
                .lefts {
                    .left {
                        color: #b3b3b3;
                        font-size: 44rpx;
                    }
                }
            }

            &.zhanshi {
                .lefts {
                    .left {
                        color: #b3b3b3;
                        font-size: 44rpx;
                    }
                }

                .icon {
                    display: block;
                }
            }

            &.heide {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;
                        }
                    }
                }
            }

            &.heides {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;
                        }
                    }
                }

                .fanti {
                    opacity: 1;
                }
            }

            &.heidess {
                .lefts {
                    opacity: 0;
                }
            }

            &.yaotubiao {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;
                        }
                    }
                }

                .icon {
                    display: block;
                }
            }

            &.yaotubiaos {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;
                        }
                    }
                }

                .fanti {
                    opacity: 1;
                }

                .icon {
                    display: block;
                }
            }

            &.yaotubiaoss {
                .lefts {
                    opacity: 0;
                }

                .icon {
                    display: block;
                }
            }
        }

        .btn-area {
            .btn-item {
                justify-content: center;
                width: 148rpx;
                height: 116rpx;
                color: #fff;
                font-size: 32rpx;

                &.active {
                    background: #29b6fc;
                }

                &.default {
                    background-color: #ff9e30;
                }
            }
        }
    }

    .btn {
        justify-content: center;
        color: #fff;
        margin: 20rpx auto 0;
        width: 610rpx;
        height: 88rpx;
        background: #9561f3;
        border-radius: 16rpx;
    }
}
</style>
